import { toJS } from "mobx";
import { inject, observer } from "mobx-react";
import { WeaTableEdit,WeaProgress,WeaRightMenu,WeaTop,WeaSearchGroup, WeaFormItem, WeaTools,WeaInput, } from "ecCom";
import { WeaSwitch } from "comsMobx";
import { Button } from "antd";
import * as Fctt from "../constants/BaseFormConstant";
const comTypes = WeaTools.types;

class BaseForm extends React.Component {
    constructor(props) {
        super(props);
    }

    getStore(){

    }

    // render before
    componentWillMount(){
        this.getStore().componentWillMount(this.props.params);
    }

    // render after
    componentDidMount() {
        this.getStore().componentDidMount();
    }

    // component remove before
    componentWillUnmount(){
        this.getStore().componentWillUnmount();
    }

    render(){
        // console.log("BaseForm rendered");
        const store = this.getStore();
        const {loading,viewTop,titleName,titleIcon} = store;
        const comGroups = this.getComGroups(store);
        return (
                <WeaRightMenu datas={this.getRightMenus(store)}>
                    {
                    viewTop && (<WeaTop
                        loading={loading}
                        title={titleName}
                        icon={<i className={titleIcon}/>}
                        iconBgcolor="#6D3CF8"
                        showDropIcon={true}
                        dropMenuDatas={this.getRightMenus(store)}
                        buttons={this.getTopButtons(store)}
                        buttonSpace={10}
                    ></WeaTop>)
                    }
                    {comGroups}
                    {this.renderAppend(store)}
                </WeaRightMenu>
        )
    }

    // render custom
    renderAppend(store){
        return [];
    }

    getRightMenus(store){
        const {rightMenus} = store;
        let btnArr = [];
        let that = this;
        rightMenus && rightMenus.length > 0 && rightMenus.map(m=>{
            btnArr.push({
                key: m.type,
                icon: <i className={m.menuIcon}/>,
                content: m.menuName,
                onClick: key =>{
                    if(key == Fctt.BTN_SAVE){
                        store.doSaveCheck();
                    }else{
                        that.rightMenuClick(key);
                    }                    
                }
            })
        });
    	return btnArr;
    }
    
    getTopButtons(store){
        const {rightMenus} = store;
        let btnArr = [];
        let that = this;
        rightMenus && rightMenus.length > 0  && rightMenus.map(m=>{
            m.isTop == "1" && btnArr.length < 4 && btnArr.push(
                <Button type="primary" 
                    onClick={()=>{
                        let fn = m.menuFun.indexOf("this") >= 0 ? `${m.menuFun.split("this")[0]})` : m.menuFun;
                        if(m.type == Fctt.BTN_SAVE){
                            store.doSaveCheck();
                        }else{
                            that.rightMenuClick(m.type);
                        }                        
                    }}>
                    {m.menuName}
                </Button>
            );
        });
        const btnArrCustom = this.getTopButtonsCustom(store);
        return btnArrCustom.concat(btnArr);
    }

    getTopButtonsCustom(store){
        let btnArr = [];
        return btnArr;
    }

    getComGroups(store) {
        const that = this;
        const {formItemGroups,form} = store;
        let groups = [];
        if(formItemGroups){
            const {isFormInit} = form;
            const formParams = form.getFormParams();
            isFormInit &&  toJS(formItemGroups).map(c =>{
              let items = [];
              c.items.map((field,index) => {
                field = that.reDefineField(field,store);
                let comSwitch;
                // 输入框类型的使用onBlur代替onChange，避免重复发送请求
                if(field.conditionType == comTypes.INPUT){
                    comSwitch = <WeaInput
                        onBlur={(v)=> {
                            let fieldObj = {};
                            fieldObj[field.domkey[0]]={value:v};
                            store.formFieldChange(fieldObj);
                        }}
                        {...field}
                    />
                }else if(field.conditionType == comTypes.TEXTAREA){
                    comSwitch = <WeaTextarea
                        onBlur={(v)=> {
                            let fieldObj = {};
                            fieldObj[field.domkey[0]]={value:v};
                            store.formFieldChange(fieldObj);
                        }}
                        {...field}
                    />
                }else{
                    comSwitch = <WeaSwitch fieldConfig={field} form={form} formParams={formParams} onChange={(fieldObj)=>{store.formFieldChange(fieldObj)}}/>
                }
                items.push({
                  com:(<WeaFormItem
                          label={`${field.label}`}
                          labelCol={{span: `${field.labelcol}`}}
                          wrapperCol={{span: `${field.fieldcol}`}}>
                            {comSwitch}
                      </WeaFormItem>),
                  col:c.col,
                })
              });
              groups.push(<WeaSearchGroup needTigger={true} title={c.title} showGroup={c.defaultshow} items={items}/>)
            });
        }
        return groups;
    }

    rightMenuClick(key){

    }

    reDefineField(field,store){
        return field;
    }
}

export default BaseForm;